<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css'; // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, toRefs, computed } from 'vue';
// @ts-ignore
import { Editor, Toolbar, IToolbarConfig } from '@wangeditor/editor-for-vue';

const props = defineProps({
  height: {
    type: String,
    default: '500px',
    required: true
  },
  uploadImage: {
    type: Object,
    default: () => ({})
  },
  toolbarConfig: {
    type: Object,
    default: () => ({})
  }
});

const { height } = toRefs(props);

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref('');
const editorConfig = computed(() => (
  {
    placeholder: '请输入内容...',
    MENU_CONF: {
      uploadImage: {
        // server: '/api/upload',
        // 单个文件的最大体积限制，默认为 5M
        maxFileSize: 5 * 1024 * 1024,
        // 最多可上传几个文件，默认为 10
        maxNumberOfFiles: 10,
        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
        allowedFileTypes: ['image/*'],
        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
        meta: {
          // token: 'xxx',
        },
        // 自定义增加 http  header
        headers: {
          // Accept: 'text/x-json',
          // otherKey: 'xxx',
        },
        // 超时时间，默认为 10 秒
        timeout: 10 * 1000,
        // 上传错误，或者触发 timeout 超时
        onError(file: File, err: any, res: any) {
          // onError(file, err, res) {               
          console.log(`${file.name} 上传出错`, err, res);
        },
        // 自定义上传
        /*async customUpload(file: File, insertFn: InsertFnType) {
          // 自己实现上传，并得到图片 url alt href
          // 最后插入图片
          console.log('=>(WangeditorPage.vue:44) file', file);
          // insertFn(url, alt, href);
        },*/
        // 自定义插入图片
        /*customInsert(res: any, insertFn: InsertFnType) {
          // customInsert(res, insertFn) { 
          // res 即服务端的返回结果
  
          // 从 res 中找到 url alt href ，然后插入图片
          // insertFn(url, alt, href)
        }*/
        ...props.uploadImage
      }
    }
  }
));

const mode = ref('default'); // 或 'simple'
const toolbarConfig = computed(() => (
  {
    // 排除，视频分组、上传视频、插入网络视频、全屏
    excludeKeys: ['group-video', 'uploadVideo', 'insertVideo', 'fullScreen'],
    ...props.toolbarConfig
  }
));

// 模拟 ajax 异步获取内容
onMounted(() => {
  getData();
});

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

function getData() {
  setTimeout(() => {
    valueHtml.value = `大家好`;
  }, 1500);
}

function handleCreated(editor: any) {
  editorRef.value = editor; // 记录 editor 实例，重要！
}

function getEditor() {
  return editorRef.value;
}

defineExpose({ getEditor });
</script>

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      class="editorOuter"
      :style="{height: height}"
      style="width: 100%;"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>

<style scoped>
</style>